<template>
  <div class="goods">
    <div class="goods-box">
      <cube-scroll-nav class="nav-scroll" :side="true" :data="goods" :current="current"
       @change="changeHandler" @sticky-change="stickyChangeHandler">
       <!-- <template slot="bar" slot-scope="props">
           <cube-scroll-nav-bar direction="vertical" :labels="props.labels"
           :txts="bartxt" :current="props.current">
          <template slot-scope=""></template>
           </cube-scroll-nav-bar>
       </template> -->
        <cube-scroll-nav-panel class="nav-panel" v-for="(item,index) in goods" :key="index"
          :label="item.name" :title="item.name">
          <ul class="panel-ul">
            <li @click="selectfooddetail(food)" class="panel-li" v-for="(food,index) in item.foods" :key="index">
              <div class="panels">
                <img class="images" width="56px" height="56px" :src="food.icon" />
                <div class="item">
                  <p class="item-title">{{food.name}}</p>
                  <p class="jiesao" v-if="food.description">{{food.description}}</p>
                  <p class="sell-count">
                    <span class="count" v-if="food.sellCount">月售{{food.sellCount}}份</span>
                    <span class="reating">好评率{{food.rating}}%</span>
                  </p>
                  <div class="bottom">
                  <div class="price">
                    <span class="newprice">{{food.price}}</span>
                    <span class="oldprice" v-if="food.oldPrice">{{food.oldPrice}}</span>
                  </div>
                  <div class="button">
                    <add-cart :food="food"></add-cart>
                  </div>
                  </div>
                </div>

              </div>
            </li>
          </ul>
        </cube-scroll-nav-panel>
      </cube-scroll-nav>
    </div>
    <div class="shopcart">
    <shop-cart :selectfoods="selectfoods" :totalcount="totalcount" :totalprice="totalprice" :seller="seller"></shop-cart>
    </div>
    <food-detail ref="food" :food="selectfood"></food-detail>
  </div>
</template>

<script>
// import BScroll from 'better-scroll'
import AddCart from '../components/cart/AddCart'
import ShopCart from '../components/shopcart/ShopCart'
import FoodDetail from '../components/food/FoodDetail'
export default {
  name: 'Goods',
  data () {
    return {
      activeKey: 0,
      current: 1,
      selectfood: {}
    }
  },
  props: {
    goods: {
      type: Array
    },
    seller: {
      type: Object
    }
  },
  components: {
    AddCart,
    ShopCart,
    FoodDetail
  },
  computed: {
    selectfoods () {
      const foods = []
      this.goods.forEach((good) => {
        good.foods.forEach((food) => {
          if (food.count) {
            foods.push(food)
          }
        })
      })
      return foods
    },
    bartxt () {
      const ret = []
      this.goods.forEach((good) => {
        const { type, name, foods } = good
        let count = 0
        foods.forEach((food) => {
          count += food.count || 0
        })
        ret.push({ type, name, count })
      })
      return ret
    },
    totalprice () {
      let price = 0
      this.selectfoods.forEach((food) => {
        price += food.price * food.count
      })
      return price
    },
    totalcount () {
      let count = 0
      this.selectfoods.forEach((food) => {
        count += food.count
      })
      return count
    }
  },
  methods: {
    selectfooddetail (food) {
      this.selectfood = food
      // this.$router.push('/food')
      this.$refs.food.show()
    },
    print () {
      console.log(this.goods)
      // this.$nextTick(() => {
      //   if (!this.s(croll) {
      //     this.scroll = new BScroll(this.$refs.sidebar, { click: true })
      //   } else {
      //     this.scroll.refresh()
      //   }
      // })
    },
    stickyChangeHandler () {},
    changeHandler () {}
  },
  created () {
    this.print()
  }
}
</script>

<style scoped lang="scss">
// 有些Sass 之类的预处理器无法正确解析 >>>。
// 可以使用 /deep/ 操作符( >>> 的别名)
.goods {
  height: 500px;
  // width: 100%;
  position: relative;
  .goods-box{
    position: absolute;
    width: 100%;
    top: 0;
    left: 0;
    bottom: 48px;
    // /deep/ .cube-scroll-nav-bar-item_active{
    //   background-color: white;
    // }
    /deep/ .cube-sticky-fixed{
      width: 110px;
      z-index: 0;
    }
    /deep/ .cube-sticky-ele{
      // height: 28px;
      // line-height: 28px;
      margin-left: 6px;
      background-color: rgba(7, 27, 7, 0.1);
      .cube-scroll-nav-panel-title{
        font-size: 14px;
        color: rgb(112, 111, 111);
        margin-left: 6px;
      }
    }
        .panel-ul{
          .panel-li{
            .panels{
              display: flex;
              padding: 18px;
              .images{
                width: 76px;
                height: 66px;
                margin-right: 10px;
                  }
              .item{
                .item-title{
                  font-size: 14px;
                }
                .jiesao{
                  font-size: 12px;
                  margin: 6px 0;
                  color: rgb(87, 88, 87);
                }
                .sell-count{
                  margin: 4px 0;
                  .count{
                    font-size: 12px;
                    margin-right: 4px;
                  }
                  .reating{
                    font-size: 12px;
                  }
                }
                .bottom{
                  display: flex;
                  justify-content: space-between;
                  .price{
                  .newprice{
                    color: red;
                    font-weight: bold;
                  }
                  .oldprice{
                     color: rgb(51, 52, 53);
                     text-decoration: line-through;
                     margin-left: 6px;
                     font-size: 14px;
                  }
                }
                .button{

                }
                }
              }
            }
          }
      }
    }
    .shopcart{
      position: fixed;
      bottom: 0;
      left: 0;
      right: 0;
      z-index: 100;
      // width: 100%;
      // height: 48px;
      // background-color: rgb(175, 155, 155);
    }
}
</style>
